import React, { Component, createRef } from 'react'
import echarts from 'echarts'
import { Card, Rate, Modal, Spin } from 'antd'
import './chart.less'
import { antIcon } from '../../loading'
import { uploadUserGrade, getChartData } from '../../../requests'
const desc = [
  '极度糟糕',
  '体验较差',
  '还需改进',
  '尚可接受',
  '比较满意',
  '非常优秀'
]
const option = {
  title: {
    text: '用户评分图'
  },
  tooltip: {},
  legend: {
    orient: 'vertical',
    x: 'right',
    data: ['用户总评分', '实用性', '操作性', '功能性', '安全性', '藏书量'],
    style: {}
  },
  //hover
  radar: {
    name: {
      textStyle: {
        color: '#fff',
        backgroundColor: '#999',
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    indicator: [
      { name: '非常优秀(6星)', max: 800 },
      { name: '比较满意(5星)', max: 800 },
      { name: '尚可接受(4星)', max: 800 },
      { name: '还需改进(3星)', max: 800 },
      { name: '体验较差(2星)', max: 800 },
      { name: '极度糟糕(1星)', max: 800 }
    ]
  },
  series: [
    {
      name: '用户评分图',
      type: 'radar',
      data: [
        {
          value: [500, 400, 600, 700, 400, 300],
          name: '用户总评分'
        },
        {
          value: [400, 200, 700, 200, 500, 100],
          name: '实用性'
        },
        {
          value: [300, 500, 270, 760, 300, 600],
          name: '操作性'
        },
        {
          value: [500, 460, 100, 350, 420, 520],
          name: '功能性'
        },
        {
          value: [700, 460, 340, 760, 200, 360],
          name: '安全性'
        },
        {
          value: [200, 460, 680, 300, 780, 300],
          name: '藏书量'
        }
      ]
    }
  ]
}

export default class UserEvaluationChart extends Component {
  constructor() {
    super()
    this.booksTrends = createRef()
    this.state = {
      valueArr: [0, 0, 0, 0, 0],
      visible: false,
      isLoading: true
    }
  }
  //模态框
  showModal = () => {
    this.setState({
      visible: true
    })
  }
  //模态框同意按钮
  handleOk = e => {
    this.setState({
      visible: false
    })
    this.completeGrade()
  }
  //模态框拒绝按钮
  handleCancel = e => {
    this.setState({
      visible: false,
      valueArr: [0, 0, 0, 0, 0]
    })
  }
  //评分
  handleChange0 = value => {
    this.state.valueArr.splice(0, 1, value)
    this.setState({ valueArr: this.state.valueArr }, () => {
      this.state.valueArr.find(value => value === 0) === 0
        ? console.log()
        : this.showModal()
    })
  }
  handleChange1 = value => {
    this.state.valueArr.splice(1, 1, value)
    this.setState({ valueArr: this.state.valueArr }, () => {
      this.state.valueArr.find(value => value === 0) === 0
        ? console.log()
        : this.showModal()
    })
  }
  handleChange2 = value => {
    this.state.valueArr.splice(2, 1, value)
    this.setState({ valueArr: this.state.valueArr }, () => {
      this.state.valueArr.find(value => value === 0) === 0
        ? console.log()
        : this.showModal()
    })
  }
  handleChange3 = value => {
    this.state.valueArr.splice(3, 1, value)
    this.setState({ valueArr: this.state.valueArr }, () => {
      this.state.valueArr.find(value => value === 0) === 0
        ? console.log()
        : this.showModal()
    })
  }
  handleChange4 = value => {
    this.state.valueArr.splice(4, 1, value)
    this.setState({ valueArr: this.state.valueArr }, () => {
      this.state.valueArr.find(value => value === 0) === 0
        ? console.log()
        : this.showModal()
    })
  }

  componentDidMount() {
    getChartData().then(resp => {
      if (resp.data.res_code === 200) {
        this.setState({
          isLoading: false
        })
        this.booksTrendsChart.setOption({
          title: {
            text: '用户评分图'
          },
          tooltip: {},
          legend: {
            orient: 'vertical',
            x: 'right',
            data: [
              '用户总评分',
              '实用性',
              '操作性',
              '功能性',
              '安全性',
              '藏书量'
            ],
            style: {}
          },
          //hover
          radar: {
            name: {
              textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: [
              { name: '非常优秀(6星)', max: 1000 },
              { name: '比较满意(5星)', max: 1000 },
              { name: '尚可接受(4星)', max: 1000 },
              { name: '还需改进(3星)', max: 1000 },
              { name: '体验较差(2星)', max: 1000 },
              { name: '极度糟糕(1星)', max: 1000 }
            ]
          },
          series: [
            {
              name: '用户评分图',
              type: 'radar',
              data: [
                {
                  value: resp.data.data.userEvaluationChartData.total,
                  name: '用户总评分'
                },
                {
                  value: resp.data.data.userEvaluationChartData.a,
                  name: '实用性'
                },
                {
                  value: resp.data.data.userEvaluationChartData.b,
                  name: '操作性'
                },
                {
                  value: resp.data.data.userEvaluationChartData.c,
                  name: '功能性'
                },
                {
                  value: resp.data.data.userEvaluationChartData.d,
                  name: '安全性'
                },
                {
                  value: resp.data.data.userEvaluationChartData.e,
                  name: '藏书量'
                }
              ]
            }
          ]
        })
      }
    })
    this.booksTrendsChart = echarts.init(this.booksTrends.current)
    this.booksTrendsChart.setOption(option)
  }
  //上传用户评分
  completeGrade() {
    const userId = JSON.parse(window.sessionStorage.getItem('usermessage'))
      .userId
    uploadUserGrade({ userId, userGrade: this.state.valueArr })
  }

  render() {
    const { valueArr } = this.state

    return (
      <Spin indicator={antIcon} spinning={this.state.isLoading}>
        <div className="userEvaluationChart-box">
          <div className="userEvaluationChart-chartBox">
            <Card
              title="我的评分"
              bordered={true}
              className="myEvaluationChart"
            >
              <div>
                <span className="span-box">
                  实用性:
                  <Rate
                    count={6}
                    onChange={this.handleChange0}
                    value={valueArr[0]}
                  />
                  {valueArr[0] ? (
                    <span className="ant-rate-text">
                      {desc[valueArr[0] - 1]}
                    </span>
                  ) : (
                    ''
                  )}
                </span>
                <span className="span-box">
                  操作性:
                  <Rate
                    count={6}
                    onChange={this.handleChange1}
                    value={valueArr[1]}
                  />
                  {valueArr[1] ? (
                    <span className="ant-rate-text">
                      {desc[valueArr[1] - 1]}
                    </span>
                  ) : (
                    ''
                  )}
                </span>
                <span className="span-box">
                  功能性:
                  <Rate
                    count={6}
                    onChange={this.handleChange2}
                    value={valueArr[2]}
                  />
                  {valueArr[2] ? (
                    <span className="ant-rate-text">
                      {desc[valueArr[2] - 1]}
                    </span>
                  ) : (
                    ''
                  )}
                </span>
                <span className="span-box">
                  安全性:
                  <Rate
                    count={6}
                    onChange={this.handleChange3}
                    value={valueArr[3]}
                  />
                  {valueArr[3] ? (
                    <span className="ant-rate-text">
                      {desc[valueArr[3] - 1]}
                    </span>
                  ) : (
                    ''
                  )}
                </span>
                <span className="span-box">
                  藏书量:
                  <Rate
                    count={6}
                    onChange={this.handleChange4}
                    value={valueArr[4]}
                  />
                  {valueArr[4] ? (
                    <span className="ant-rate-text">
                      {desc[valueArr[4] - 1]}
                    </span>
                  ) : (
                    ''
                  )}
                </span>
                <span className="span-box">
                  总评分:
                  <Rate
                    disabled={true}
                    count={6}
                    value={
                      valueArr.find(value => value === 0) === 0
                        ? 0
                        : valueArr.reduce((a, b) => a + b) / 5
                    }
                  />
                  {valueArr.find(value => value === 0) === 0 ? (
                    ''
                  ) : (
                    <span className="ant-rate-text">
                      {
                        desc[
                          Math.floor(valueArr.reduce((a, b) => a + b) / 5) - 1
                        ]
                      }
                    </span>
                  )}
                </span>
              </div>
            </Card>
            <div ref={this.booksTrends} className="userEvaluationChart-chart" />
          </div>
          <Card
            title="用户评论"
            bordered={false}
            className="userEvaluationChart"
          />
          <Modal
            title="您是否同意我们提交您对本平台的评分?"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            cancelText="拒绝提交"
            okText="同意提交"
          >
            <p>实用性:{desc[valueArr[0] - 1]}</p>
            <p>操作性:{desc[valueArr[1] - 1]}</p>
            <p>功能性:{desc[valueArr[2] - 1]}</p>
            <p>安全性:{desc[valueArr[3] - 1]}</p>
            <p>藏书量:{desc[valueArr[4] - 1]}</p>
          </Modal>
        </div>
      </Spin>
    )
  }
}
